<template>
  <div id="goodslist">
    <div class="navbar">
      <nav-bar>网易严选</nav-bar>
    </div>
    <cate-tab
      :categoryList="categoryList"
      :categoryId="$route.params.categoryId"
    ></cate-tab>
    <scroll class="content" ref="scroll">
      <goods :goodsList="goodsList"></goods>
    </scroll>
  </div>
</template>
<script>
import { getCatalogCurrent } from "network/category";
import { getGoodsList } from "network/category";

import Scroll from "components/common/Scroll.vue";
import NavBar from "components/common/NavBar";
import CateTab from "components/category/CateTab";
import Goods from "components/common/Goods.vue";
export default {
  name: "GoodsList",
  data() {
    return {
      categoryId: "",
      categoryList: [],
      goodsList: [],
    };
  },
  created() {
    this.getCatalogCurrent();
    this.getGoodsList();
  },
  mounted() {
    const refresh = this.debounce(this.$refs.scroll.refresh,50)

    this.$bus.$on("itemImageLoad", () => {
      refresh()
    });
  },
  // computed: {
  //   imgOnload() {
  //     return this.$store.state.imgOnload;
  //   },
  // },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      this.getCatalogCurrent();
      this.getGoodsList();
    },
  },
  methods: {
    getCatalogCurrent() {
      getCatalogCurrent(this.$route.params.categoryId)
        .then((res) => {
          this.categoryList = res.data.data.currentCategory.subCategoryList;
          // this.goodsList = this.currentCategory.subCategoryList
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getGoodsList() {
      getGoodsList(this.$route.params.subCategoryId)
        .then((res) => {
          this.goodsList = res.data.data.goodsList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    debounce(func, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
  },
  components: {
    Scroll,
    NavBar,
    CateTab,
    Goods,
  },
};
</script>
<style scoped>
#goodslist {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 50px;
}
.navbar {
  position: sticky;
  top: 0;
  background-color: #fafafa;
  z-index: 4;
}
</style>